<%--
  Created by IntelliJ IDEA.
  User: wangj
  Date: 2023/10/7
  Time: 20:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>商品基本信息页</title>
    <!-- 引入 layui.css -->
    <link href="https://unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="https://unpkg.com/layui@2.8.17/dist/layui.js"></script>
    <link href="/static/css/main.css" rel="stylesheet">
    <script src="/static/js/jquery-3.7.0.js"></script>
</head>
<body>
    <div class="body">

            <ul>
                <li>
                    <img style="height: 272px;" src="" alt="">
                    <div class="message">
                        <div class="pricebox">
                            <span class="price">￥${goods.price}</span>
                            <span class="amount">月销 ${goods.sellamount}</span>
                        </div>
                        <div class="details">产地 ${goods.country}</div>
                        <div class="title">${goods.title}
                        </div>
                    </div>
                    <div class="p-quantity">
                        <span class="countText">数量：</span>
                        <input type="button" class="decrease" value="-">
                        <input type="text" class="quantity" id="feifei2" value="1"/>
                        <input type="button" class="increase" value="+">
                    </div>
                    <div class="star">
                        <i class="layui-icon layui-icon-star"></i>
                        <a href="javascript:;" title="收藏">收藏商品</a>
                    </div>
                    <div class="layui-btn-container">
                        <button type="button" style="margin-right: -5px;" class="layui-btn layui-btn-warm">立即购买</button>
                        <button type="button"  onclick="feifei1(${goods.gid})" class="layui-btn layui-btn-danger">加入购物车</button>
                    </div>
                </li>
            </ul>

        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">商品详情</li>
                <li>商品评价</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容-1</div>
                <div class="layui-tab-item">内容-2</div>
            </div>
        </div>
    </div>
    <script>
        //获取所有+按钮
        var increment = document.getElementsByClassName("increase");
        for (var i = 0; i < increment.length; i++) {
            //为a标签添加index属性，用于记录下标
            increment[i].index = i;
            //点击+数量增加的功能函数
            increment[i].onclick = function () {
                var flag = this.index;
                //获取当前按钮对应的数量框
                var q = document.getElementsByClassName("quantity")[flag];
                var newvalue = parseInt(q.value) + 1;
                q.setAttribute('value', newvalue);
                //更新此商品对应的‘小计’
                // changeSum(flag, newvalue);
            }
        }
        //获取所有-按钮
        var decrement=document.getElementsByClassName('decrease');
        //点击-数量减少的功能函数
        for(var j=0;j<decrement.length;j++)
        {
            decrement[j].index=j;
            decrement[j].onclick=function()
            {
                var flag=this.index;
                //获取当前a标签对应的那个数量框
                var q=document.getElementsByClassName("quantity")[flag];
                if(parseInt(q.value)>1)
                {
                    var newvalue=parseInt(q.value)-1;
                    q.setAttribute('value',newvalue);
                    // changeSum(flag,newvalue);
                }
            }
        }
        var heart = document.getElementsByClassName("layui-icon-star");
        for(var i = 0 ; i < heart.length ; i++){
            (function(i){
                var flag = true;
                heart[i].onclick = function(){
                    if(flag){ //点击收藏
                        flag = false;
                        // 添加样式
                        this.className = "layui-icon layui-icon-star-fill active";
                    }else{ //点击取消收藏
                        flag = true;
                        this.className = "layui-icon layui-icon-star";
                    }
                }
            })(i);
        }
        function feifei1(gid){
           var num= $("#feifei2").val();
            console.log(num)
           $.post(
               "/addGouwuche",
               {
                   "gid":gid,
                   "num":num
               },
               function (data){
                   alert(data)
               },
               "text"
           )
        }
    </script>


</body>
</html>
